<template>
  <div class="music-library-container">
    <div class="library-header">
      <h1>音乐库</h1>
      <div class="tabs">
        <button
          :class="{ active: selectedTab === 'music-library' }"
          @click="selectedTab = 'music-library'"
        >
          我的音乐库
        </button>
        <button :class="{ active: selectedTab === 'playlists' }" @click="selectedTab = 'playlists'">
          我的歌单
        </button>
      </div>
    </div>

    <div v-if="selectedTab === 'music-library'" class="tab-content music-library-content">
      <div class="search-and-filter-wrapper">
        <div class="search-bar">
          <span class="search-icon">🔍</span>
          <input
            type="text"
            v-model="searchQueryMusic"
            placeholder="搜索歌曲、专辑或艺术家..."
            @input="handleSearchMusic"
          />
        </div>
        <div class="filters">
          <select
            v-model="selectedFilterMusic"
            @change="handleFilterChangeMusic"
            class="filter-select"
          >
            <option value="all">全部</option>
            <option value="songs">歌曲</option>
            <option value="albums">专辑</option>
            <option value="artists">艺术家</option>
          </select>
        </div>
      </div>
      <div class="items-grid">
        <div v-for="item in filteredItemsMusic" :key="item.id" class="item-card">
          <div class="item-image">
            <img :src="item.image || '/default-album.png'" :alt="item.name" />
            <div class="item-overlay">
              <button class="play-btn" @click="playItem(item.id)">▶</button>
            </div>
          </div>
          <div class="item-info">
            <h3>{{ item.name }}</h3>
            <p>
              {{ item.type === 'song' ? item.artist : item.type === 'album' ? '专辑' : '艺术家' }}
            </p>
          </div>
        </div>
        <div v-if="filteredItemsMusic.length === 0" class="no-results">
          <p>没有找到相关结果。</p>
        </div>
      </div>
    </div>

    <div v-else-if="selectedTab === 'playlists'" class="tab-content playlists-content">
      <div class="header-controls">
        <div class="search-bar">
          <input
            type="text"
            v-model="searchQueryPlaylists"
            placeholder="搜索歌单..."
            @input="handleSearchPlaylists"
            class="search-input"
          />
          <i class="fas fa-search search-icon"></i>
        </div>
        <button class="btn btn-primary" @click="createPlaylist">
          <i class="fas fa-plus"></i>
          创建新歌单
        </button>
      </div>

      <div class="my-playlists-section">
        <h2 class="section-title">我的歌单 ({{ userPlaylists.length }})</h2>
        <div v-if="userPlaylists.length === 0" class="no-playlists card">
          <p>您还没有创建任何歌单。</p>
          <button class="btn btn-accent" @click="createPlaylist">
            <i class="fas fa-plus"></i>
            创建您的第一个歌单
          </button>
        </div>
        <div v-else class="playlists-grid grid-4-cols">
          <div v-for="playlist in userPlaylists" :key="playlist.id" class="playlist-card card">
            <div class="playlist-image">
              <!-- <img :src="playlist.cover || '/default-playlist.png'" :alt="playlist.name" /> -->
              <div class="playlist-overlay">
                <button class="play-btn" @click="playPlaylist(playlist.id)">▶</button>
              </div>
            </div>
            <div class="playlist-info">
              <h3>{{ playlist.name }}</h3>
              <p>{{ playlist.songCount }} 首歌</p>
              <div class="playlist-actions">
                <button class="action-btn edit-btn" @click="editPlaylist(playlist.id)">
                  <i class="fas fa-edit"></i>
                </button>
                <button class="action-btn delete-btn" @click="deletePlaylist(playlist.id)">
                  <i class="fas fa-trash-alt"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="public-playlists-section">
        <h2 class="section-title">探索热门歌单</h2>
        <div
          v-if="searchQueryPlaylists.length > 0 && searchResultsPlaylists.length === 0"
          class="no-results card"
        >
          <p>没有找到相关歌单。</p>
        </div>
        <div v-else class="playlists-grid grid-4-cols">
          <div v-for="playlist in displayPlaylists" :key="playlist.id" class="playlist-card card">
            <div class="playlist-image">
              <!-- <img :src="playlist.cover || '/default-playlist.png'" :alt="playlist.name" /> -->
              <div class="playlist-overlay">
                <button class="play-btn" @click="playPlaylist(playlist.id)">▶</button>
              </div>
            </div>
            <div class="playlist-info">
              <h3>{{ playlist.name }}</h3>
              <p>by {{ playlist.creator }} • {{ playlist.songCount }} 首歌</p>
              <div class="playlist-actions">
                <button class="action-btn add-btn" @click="addOtherPlaylist(playlist.id)">
                  <i class="fas fa-plus"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import api from '@/services/api'

export default {
  name: 'MusicLibraryView',
  setup() {
    const route = useRoute()
    const selectedTab = ref(route.query.section || 'music-library')

    watch(
      () => route.query.section,
      (newSection) => {
        selectedTab.value = newSection || 'music-library'
      },
    )

    // 音乐库相关
    const searchQueryMusic = ref('')
    const selectedFilterMusic = ref('all')
    const itemsMusic = ref([])
    const loadingMusic = ref(false)
    const errorMusic = ref('')

    // 歌单相关
    const userPlaylists = ref([])
    const allPublicPlaylists = ref([])
    const searchQueryPlaylists = ref('')
    const searchResultsPlaylists = ref([])
    const loadingPlaylists = ref(false)
    const errorPlaylists = ref('')

    // 获取音乐库数据
    const fetchMusic = async () => {
      loadingMusic.value = true
      errorMusic.value = ''
      try {
        // 检查是否已登录
        const token = localStorage.getItem('token')
        if (!token) {
          errorMusic.value = '请先登录'
          return
        }

        console.log('Fetching music with params:', {
          search: searchQueryMusic.value,
          type: selectedFilterMusic.value,
        })
        const res = await api.get('/music', {
          params: {
            search: searchQueryMusic.value,
            type: selectedFilterMusic.value,
          },
        })
        console.log('API response:', res)
        if (res.code === 0) {
          itemsMusic.value = res.data
        } else {
          errorMusic.value = res.message || '获取音乐库失败'
        }
      } catch (e) {
        console.error('Error fetching music:', e)
        if (e.response?.status === 401) {
          errorMusic.value = '登录已过期，请重新登录'
          // 可以在这里添加重定向到登录页面的逻辑
        } else {
          errorMusic.value = '获取音乐库失败'
        }
      } finally {
        loadingMusic.value = false
      }
    }

    // 获取我的歌单
    const fetchUserPlaylists = async () => {
      loadingPlaylists.value = true
      errorPlaylists.value = ''
      try {
        // 假设后端接口为 /api/playlists/my
        const res = await api.get('/playlists/my')
        if (res.code === 0) {
          userPlaylists.value = res.data
        } else {
          errorPlaylists.value = res.message || '获取歌单失败'
        }
      } catch (e) {
        errorPlaylists.value = '获取歌单失败'
      } finally {
        loadingPlaylists.value = false
      }
    }

    // 获取热门/公共歌单
    const fetchPublicPlaylists = async () => {
      try {
        // 假设后端接口为 /api/playlists/public
        const res = await api.get('/playlists/public')
        if (res.code === 0) {
          allPublicPlaylists.value = res.data
        }
      } catch (e) {
        // 可选：处理错误
      }
    }

    // 搜索和筛选
    const filteredItemsMusic = computed(() => {
      let filtered = itemsMusic.value
      if (selectedFilterMusic.value !== 'all') {
        filtered = filtered.filter((item) => item.type === selectedFilterMusic.value.slice(0, -1))
      }
      if (searchQueryMusic.value) {
        const query = searchQueryMusic.value.toLowerCase()
        filtered = filtered.filter(
          (item) =>
            item.name.toLowerCase().includes(query) ||
            (item.artist && item.artist.toLowerCase().includes(query)),
        )
      }
      return filtered
    })

    // 搜索处理
    const handleSearchMusic = () => {
      console.log('Search triggered:', searchQueryMusic.value)
      fetchMusic()
    }

    // 筛选处理
    const handleFilterChangeMusic = () => {
      console.log('Filter changed:', selectedFilterMusic.value)
      fetchMusic()
    }

    // 监听搜索和筛选变化
    watch(
      [searchQueryMusic, selectedFilterMusic],
      ([newSearch, newFilter]) => {
        console.log('Search or filter changed:', { newSearch, newFilter })
        fetchMusic()
      },
      { debounce: 300 },
    ) // 添加300ms的防抖

    // 歌单搜索
    const displayPlaylists = computed(() => {
      return searchQueryPlaylists.value.trim() !== ''
        ? searchResultsPlaylists.value
        : allPublicPlaylists.value
    })

    const handleSearchPlaylists = () => {
      if (searchQueryPlaylists.value.trim() === '') {
        searchResultsPlaylists.value = []
        return
      }
      const query = searchQueryPlaylists.value.toLowerCase()
      searchResultsPlaylists.value = allPublicPlaylists.value.filter(
        (playlist) =>
          playlist.name.toLowerCase().includes(query) ||
          (playlist.creator && playlist.creator.toLowerCase().includes(query)),
      )
    }

    // 创建歌单
    const createPlaylist = async () => {
      const playlistName = prompt('请输入新歌单的名称：')
      if (playlistName) {
        try {
          const res = await api.post('/playlists', { name: playlistName })
          if (res.code === 0) {
            await fetchUserPlaylists()
            alert(`歌单 "${playlistName}" 创建成功！`)
          } else {
            alert(res.message || '创建歌单失败')
          }
        } catch (error) {
          alert('创建歌单失败，请稍后再试。')
        }
      } else if (playlistName !== null) {
        alert('歌单名称不能为空。')
      }
    }

    // 编辑、删除、添加歌单等功能可按需补充
    const editPlaylist = (id) => {
      alert(`编辑歌单 ID: ${id} 功能待实现！`)
    }
    const deletePlaylist = async (id) => {
      if (confirm('确定要删除这个歌单吗？')) {
        try {
          const res = await api.delete(`/playlists/${id}`)
          if (res.code === 0) {
            await fetchUserPlaylists()
            alert('歌单已删除！')
          } else {
            alert(res.message || '删除失败')
          }
        } catch (e) {
          alert('删除失败，请稍后再试。')
        }
      }
    }
    const addOtherPlaylist = async (id) => {
      // 这里假设是收藏/订阅公共歌单
      try {
        const res = await api.post(`/playlists/${id}/subscribe`)
        if (res.code === 0) {
          await fetchUserPlaylists()
          alert('已添加到我的歌单！')
        } else {
          alert(res.message || '添加失败')
        }
      } catch (e) {
        alert('添加失败，请稍后再试。')
      }
    }
    const playItem = (id) => {
      alert(`播放项目 ID: ${id} (功能待实现)！`)
    }
    const playPlaylist = (id) => {
      alert(`播放歌单 ID: ${id} (功能待实现)！`)
    }

    // 初始化加载
    onMounted(() => {
      console.log('Component mounted, fetching initial data')
      fetchMusic()
      fetchUserPlaylists()
      fetchPublicPlaylists()
    })

    return {
      selectedTab,
      searchQueryMusic,
      selectedFilterMusic,
      filteredItemsMusic,
      handleSearchMusic,
      handleFilterChangeMusic,
      userPlaylists,
      allPublicPlaylists,
      searchQueryPlaylists,
      searchResultsPlaylists,
      displayPlaylists,
      createPlaylist,
      editPlaylist,
      deletePlaylist,
      handleSearchPlaylists,
      addOtherPlaylist,
      playItem,
      playPlaylist,
      loadingMusic,
      errorMusic,
      loadingPlaylists,
      errorPlaylists,
    }
  },
}
</script>

<style scoped>
.music-library-container {
  /* padding: var(--spacing-lg) 0; */ /* 移除左右内边距 */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg); /* 统一应用左右内边距 */
  background: var(--background-color-light); /* 浅灰色背景 */
  min-height: 100vh;
}

.library-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  /* padding: var(--spacing-md) var(--spacing-lg); */ /* 移除左右内边距 */
  background-color: var(--surface-light);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-md) var(--spacing-lg);
}

.library-header h1 {
  font-size: 2.5em; /* 增大字体 */
  margin-bottom: 0;
  color: var(--text-color-primary); /* 使用主题变量 */
  font-weight: 700; /* 更粗的字体 */
}

.tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.tabs button {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: transparent;
  color: var(--text-color-secondary);
  cursor: pointer;
  transition: all var(--transition-normal);
  font-size: var(--font-size-md);
}

.tabs button:hover {
  background-color: var(--background-color-light);
}

.tabs button.active {
  background-color: var(--primary-color);
  color: var(--text-white);
  border-color: var(--primary-color);
}

.search-and-filter-wrapper {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  /* padding: var(--spacing-md) var(--spacing-lg); */ /* 移除左右内边距 */
  background-color: var(--surface-light);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
}

.search-bar {
  position: relative;
  /* flex: 1; */ /* 移除 flex 增长属性 */
  display: flex;
  align-items: center;
  max-width: 300px; /* 设置最大宽度 */
  flex-grow: 1; /* 允许在有空间时增长 */
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color-secondary); /* 使用主题变量 */
  font-size: 1.1em;
}

.search-bar input {
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 2.8rem;
  border: 1px solid var(--border-color); /* 使用主题变量 */
  border-radius: 8px;
  font-size: 1rem;
  background: var(--surface-light); /* 使用白色背景 */
  color: var(--text-color-primary); /* 使用主题变量 */
  transition: all 0.3s ease;
}

.search-bar input:focus {
  outline: none;
  border-color: var(--primary-color); /* 使用主题变量 */
  box-shadow: 0 0 0 2px var(--primary-color-light); /* 使用主题变量 */
}

.search-bar input::placeholder {
  color: var(--text-color-secondary); /* 使用主题变量 */
}

.filters {
  min-width: 120px;
}

.filter-select {
  padding: 0.8rem 2.5rem 0.8rem 1rem;
  border: 1px solid var(--border-color); /* 使用主题变量 */
  border-radius: 8px;
  font-size: 1rem;
  background: var(--surface-light); /* 使用白色背景 */
  color: var(--text-color-primary); /* 使用主题变量 */
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23999%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-color); /* 使用主题变量 */
  box-shadow: 0 0 0 2px var(--primary-color-light); /* 使用主题变量 */
}

.filter-select option {
  background: var(--background-color-light); /* 使用主题变量 */
  color: var(--text-color-primary); /* 使用主题变量 */
}

.tab-content {
  margin-top: 1.5rem;
}

/* 音乐库内容样式 */
.music-library-content .items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
  padding: 0.5rem;
}

.music-library-content .item-card {
  background: var(--surface-light); /* 白色 */
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: var(--shadow-sm);
  border: none;
}

.music-library-content .item-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.music-library-content .item-image {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: var(--surface-light); /* 确保图片占位符也是白色 */
  overflow: hidden;
}

.music-library-content .item-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.music-library-content .item-card:hover .item-image img {
  transform: scale(1.05);
}

.music-library-content .item-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.music-library-content .item-card:hover .item-overlay {
  opacity: 1;
}

.music-library-content .play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-color);
  border: none;
  color: var(--text-white);
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-primary);
}

.music-library-content .play-btn:hover {
  transform: scale(1.1);
  background: var(--primary-color-dark);
}

.music-library-content .item-info {
  padding: 0.8rem;
  color: var(--text-color-primary);
}

.music-library-content .item-info h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-library-content .item-info p {
  margin: 0;
  color: var(--text-color-secondary);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-library-content .no-results {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-color-secondary);
  font-size: 1.1em;
  padding: 3rem;
  background: var(--surface-light);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

/* 歌单内容样式 */
.playlists-content .header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  /* padding: var(--spacing-md) var(--spacing-lg); */ /* 移除左右内边距 */
  background-color: var(--surface-light);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-md) var(--spacing-lg);
}

.playlists-content .search-bar {
  flex: 1;
  max-width: 300px; /* 确保歌单搜索框也有最大宽度限制 */
}

.playlists-content .search-input {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-2xl);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-md);
  background-color: var(--surface-light);
  color: var(--text-color-primary);
  transition: all var(--transition-normal);
}

.playlists-content .search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.2);
}

.playlists-content .search-input::placeholder {
  color: var(--text-secondary);
}

.playlists-content .search-icon {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
}

.playlists-content .btn.btn-primary {
  background: var(--primary-gradient);
  color: var(--text-white);
  border: none;
  box-shadow: var(--shadow-md);
}

.playlists-content .btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  opacity: 0.9;
}

.playlists-content .my-playlists-section,
.playlists-content .public-playlists-section {
  margin-bottom: var(--spacing-3xl);
}

.playlists-content .section-title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin-bottom: var(--spacing-xl);
  color: var(--text-color-primary);
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: var(--spacing-sm);
  display: inline-block;
}

.playlists-content .no-playlists,
.playlists-content .no-results {
  text-align: center;
  color: var(--text-secondary);
  padding: var(--spacing-2xl);
  margin-top: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  background-color: var(--surface-light);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.playlists-content .no-playlists p,
.playlists-content .no-results p {
  font-size: var(--font-size-lg);
}

.playlists-content .playlists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjusted for consistency */
  gap: var(--spacing-lg);
}

.playlists-content .playlist-card {
  background-color: var(--surface-light);
  overflow: hidden;
  position: relative;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.playlists-content .playlist-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.playlists-content .playlist-image {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background-color: var(--surface-light);
  overflow: hidden;
}

.playlists-content .playlist-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.playlists-content .playlist-card:hover .playlist-image img {
  transform: scale(1.1);
}

.playlists-content .playlist-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.playlists-content .playlist-card:hover .playlist-overlay {
  opacity: 1;
}

.playlists-content .play-btn {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-circle);
  background-color: var(--primary-color);
  border: none;
  color: var(--text-white);
  font-size: var(--font-size-xl);
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  justify-content: center;
  align-items: center;
}

.playlists-content .play-btn:hover {
  transform: scale(1.1);
  background-color: var(--primary-color-dark);
}

.playlists-content .playlist-info {
  padding: var(--spacing-md);
  color: var(--text-color-primary);
  text-align: center;
}

.playlists-content .playlist-info h3 {
  margin: 0;
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlists-content .playlist-info p {
  margin: 0;
  color: var(--text-color-secondary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlists-content .playlist-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.playlists-content .action-btn {
  background-color: var(--background-color-light);
  color: var(--text-color-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-circle);
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.playlists-content .action-btn:hover {
  background-color: var(--primary-color);
  color: var(--text-white);
  border-color: var(--primary-color);
  transform: scale(1.1);
}

/* Responsive adjustments for Music Library */
@media (max-width: 1024px) {
  .music-library-container {
    padding: 1rem;
  }

  .library-header {
    padding: 1.2rem 1.5rem;
  }

  .library-header h1 {
    font-size: 2.2em;
  }

  .search-and-filter-wrapper {
    flex-direction: column;
    gap: 0.8rem;
  }

  .search-bar,
  .filters {
    width: 100%;
    max-width: none;
  }

  .music-library-content .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .playlists-content .playlists-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 768px) {
  .music-library-container {
    padding: 0.5rem;
  }

  .library-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .tabs {
    width: 100%;
    justify-content: center;
  }

  .library-header h1 {
    font-size: 2em;
    width: 100%;
    text-align: center;
  }

  .search-and-filter-wrapper {
    flex-direction: column;
    gap: 0.8rem;
  }

  .search-bar input,
  .filter-select {
    font-size: 0.95rem;
    padding: 0.7rem 1rem 0.7rem 2.5rem;
  }

  .music-library-content .items-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }

  .music-library-content .item-info h3 {
    font-size: 0.95rem;
  }

  .music-library-content .item-info p {
    font-size: 0.85rem;
  }

  .music-library-content .play-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .playlists-content .playlists-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }

  .playlists-content .header-controls {
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: stretch;
  }

  .playlists-content .search-bar {
    max-width: none;
    width: 100%;
  }

  .playlists-content .search-input {
    padding-left: var(--spacing-md);
  }

  .playlists-content .search-icon {
    left: auto;
    right: var(--spacing-md);
  }

  .playlists-content .btn.btn-primary {
    width: 100%;
  }
}
</style>
